<template>
    <div class="listen-book-footer">
        <div class="no-member-box member-box" v-show="isShow==0">
          <!--@click.native='getOpenid'-->
            <router-link tag="span" :to="{path:'/try',query:{pid: pid, type:0}}" class="left-button btns">试听五分钟</router-link>
            <router-link tag="span" :to="{path:'/user/login', query:{type: 1, agentId: agentId, pid: pid}}" class="login-listen-btn btns" >开通VIP立即拿下</router-link>
        </div>
        <div class="member-box" v-show="isShow==1">
            <router-link class="get-book btns" tag="span" :to="{path:'/listensure', query:{agentId: agentId, pid: pid, uid: uid}}">拿下</router-link>
        </div>
        <div class="buy-member-box member-box" v-show="isShow==2">
            <span class="play-book btns" :to="{path:'/try',query:{pid: pid,type:1}}">播放</span>
        </div>
        <div class="mark-haibao-box member-box" v-show="isShow==3">
            <div class="haibao" @click="newPost">生成海报图</div>
            <div class="share-btn" @click="share">立即分享</div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['isShow', 'postData'],
    data () {
        return {
            agentId: this.$route.query.agentId,
            pid: this.$route.query.pid,
            uid: this.postData.uid
        }
    },
    methods: {
        destroyFix() {
            this.shareShow = false;
        },
        newPost() {
            this.$router.push({path: '/postOffer', query: {agentId: this.agentId, pid: this.pid, type: 3}})
        },
        share() {
            this.$emit('shareFn', true)
        },
        getOpenid() {
          var appid1 = "wxb94fe8357c844b53";
          var code = this.getUrlParam("code");
          var local = window.location.href;
          if (code == null || code === ''){
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
              + appid1
              + "&redirect_uri="
              + encodeURIComponent(local)
              + "&response_type=code"
              + "&scope=snsapi_base"
              + "&state=1"
              + "#wechat_redirect";
          }else {
            var url = "http://dlsapi.rz158.com/thirdPay/getOpenId?code=" + code;
            axios.post(url).then((response) => {
              localStorage.setItem("openid", response.data.t);
            }).catch((error) => {
            })
          }
        }
    }
}
</script>

<style lang="less">
    .listen-book-footer {
        height: 0.8rem;
        line-height: 0.8rem;
        color: #282828;
        font-size: 0.32rem;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 100;
        background: #fff;
        .member-box {
            display: flex; 
            .btns {
                flex: 1;
                text-align: center;
            }  
            .get-book {
                border-top: 1px solid #29abae;
                border-bottom: 1px solid #29abae;
                background: #29abae;
                color: #fff;
            }
            .play-book {
                border-top: 1px solid #29abae;
                border-bottom: 1px solid #29abae;
                background: #29abae;
                color: #fff;
            }
        }
        .no-member-box {
            .left-button {
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            .login-listen-btn {
                border-top: 1px solid #29abae;
                border-bottom: 1px solid #29abae;
                background: #29abae;
                color: #fff;
            }
        }
        .mark-haibao-box {
            .haibao {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #ff9920;
                color: #fff;
                text-align: center;
            }
            .share-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
        }
    }
</style>
